    $('.header').load('indexhead.html');


    //banner模拟

    let arr = [
        { url: 'images/indexbanner.png' },
    ]
    let oUl = document.querySelector('.swiper-wrapper')
    let oLi = document.querySelectorAll('.swiper-slide')

    arr.forEach(function(ele, index) {
        oLi[index].style = `background:url(${ele.url}) center no-repeat;`
    })

    //
    $(".swiper-wrapper").mouseenter(
        function() {
            $('.swiper-button-next').css({
                right: '0',
            });
        },
    );
    $(".swiper-wrapper").mouseleave(
        function() {
            $('.swiper-button-next').css({
                right: '-30px',
            });
        },
    );

    //
    $(".swiper-wrapper").mouseenter(
        function() {
            $('.swiper-button-prev').css({
                left: '170px',

            });
        },
    );
    $(".swiper-wrapper").mouseleave(
        function() {
            $('.swiper-button-prev').css({
                left: '138px',
            });
        },
    );

    //


    $('.index_kind ul li').mouseenter(function() {

        $('.kind_erji').eq($(this).index()).show()
    });
    $('.index_kind ul li').mouseleave(function() {
        $('.kind_erji').eq($(this).index()).hide()
    });


    //每日新品轮播

    let dayNewlunbo = document.querySelector('.dayNewlunbo')
    let dayBox = document.querySelectorAll('.dayNewlunbo1')
    let onext = document.querySelector('.dayNewbtn .next')
    let oprev = document.querySelector('.dayNewbtn .prev')

    let iNow = 0

    function prev() {
        iNow++
        if (iNow = 1) {
            iNow = 0
        }
        dayNewlunbo.style.left = -iNow * 1220 + 'px'
    }
    oprev.addEventListener('click', prev)

    function next() {
        iNow--
        if (iNow = -1) {
            iNow = 1
        }
        dayNewlunbo.style.left = -iNow * 1220 + 'px'
    }
    onext.addEventListener('click', next)


    //为您介绍轮播

    let intrlunbo = document.querySelector('.intrlunbo')
    let intr = document.querySelectorAll('.intrlunbo1')
    let intrnext = document.querySelector('.intrbtn .next')
    let intrprev = document.querySelector('.intrbtn .prev')

    let intriNow = 0

    function intprev() {
        intriNow++
        if (intriNow = 1) {
            intriNow = 0
        }
        intrlunbo.style.left = -intriNow * 1220 + 'px'
    }
    intrprev.addEventListener('click', intprev)

    function intnext() {
        intriNow--
        if (intriNow = -1) {
            intriNow = 1
        }
        intrlunbo.style.left = -intriNow * 1220 + 'px'
    }
    intrnext.addEventListener('click', intnext)


    //每日新品渲染

    function pageAjax(n) {
        console.log(1)
        pAjax({
            url: 'server/index.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 20,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            console.log(json)

            total = json.total
                // 先清空后渲染
                // console.log(total)
            dayNewlunbo.innerHTML = ''
                // 循环渲染页面
            json.data.forEach(function(ele) {
                let str = `
                <ul class="dayNewlunbo1">
                <li>
                        <img src="${ele.img1}" alt=" ">
                        <p>${ele.title}</p>
                        <span>￥${ele.price}</span>
                    </li>
                </ul>
                    `
                dayNewlunbo.innerHTML += str
            })
        })
        pAjax({
            url: 'server/indexlist2.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 7,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let listmain = document.querySelector('.listmain')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="listbox"> 
                    <i>新品</i><i>热卖</i>
                    <img src="${ele.img}" alt="">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.xiao}人评价</em>
                    </div>`
                listmain.innerHTML += str
            })
            var listsmallbox = document.createElement('div')
            listsmallbox.className = 'listsmallbox'
            listmain.appendChild(listsmallbox)
        })


        setTimeout(function() {
                pAjax({
                    url: 'server/index.php',
                    data: {
                        pagenum: localStorage.getItem('pagenum') - 0 || 1,
                        pagesize: 1,
                    }

                }).then(function(res) {
                    var json = JSON.parse(res)
                    console.log(json)
                    let listmain = document.querySelector('.listsmallbox')
                    listmain.innerHTML = `<img src="${json.data[0].img1}" alt="">
                <p>${json.data[0].title}</p>
                <span>￥${json.data[0].price}</span>`
                })
            }, 100)
            /////////滋补养生
        pAjax({
            url: 'server/indexlist3.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 7,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let gfmain = document.querySelector('.gfmain')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="gfbox"> 
                    <img src="${ele.img}" alt="" data-id="${ele.id}">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.xiao}人评价</em>
                    </div>`
                gfmain.innerHTML += str
                let gfbox = document.querySelectorAll('.gfbox')
                console.log(gfbox)
                gfbox.forEach(function(e, i) {
                    e.addEventListener('click', function(ev) {
                        if (ev.target.tagName === 'IMG') {
                            let id = ev.target.getAttribute('data-id')
                            console.log(id)
                            window.location.href = 'html/detail.html?id=' + id

                            localStorage.setItem('detailId', id)
                        }
                    })
                })

            })
            var gfsmallbox = document.createElement('div')
            gfsmallbox.className = 'gfsmallbox'
            gfmain.appendChild(gfsmallbox)
        })


        setTimeout(function() {
            pAjax({
                url: 'server/indexlist2.php',
                data: {
                    pagenum: localStorage.getItem('pagenum') - 0 || 1,
                    pagesize: 1,
                }

            }).then(function(res) {
                var json = JSON.parse(res)
                console.log(json)
                let gfsmallbox = document.querySelector('.gfsmallbox')
                gfsmallbox.innerHTML = `<img src="${json.data[0].img}" alt="" data-id="${json.data[0].id}">
                <p>${json.data[0].title}</p>
                <span>￥${json.data[0].price}</span>`
                    // let gfsmallbox = document.querySelector('.gfsmallbox')
                gfsmallbox.addEventListener('click', function(ev) {
                    if (ev.target.tagName === 'IMG') {
                        let id = ev.target.getAttribute('data-id')
                        console.log(id)
                        window.location.href = 'html/detail.html?id=' + id

                        localStorage.setItem('detailId', id)
                    }
                })

            })

        }, 100)

        /////营养保健
        pAjax({
            url: 'server/indexlist6.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 7,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let ntrmain = document.querySelector('.ntrmain')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="ntrbox"> 
                    <img src="${ele.img}" alt="">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.xiao}人评价</em>
                    </div>`
                ntrmain.innerHTML += str
            })
            var ntrsmallbox = document.createElement('div')
            ntrsmallbox.className = 'ntrsmallbox'
            ntrmain.appendChild(ntrsmallbox)
        })


        setTimeout(function() {
            pAjax({
                url: 'server/indexlist1.php',
                data: {
                    pagenum: localStorage.getItem('pagenum') - 0 || 1,
                    pagesize: 1,
                }

            }).then(function(res) {
                var json = JSON.parse(res)
                console.log(json)
                let ntrsmallbox = document.querySelector('.ntrsmallbox')
                ntrsmallbox.innerHTML = `<img src="${json.data[0].img}" alt="">
                <p>${json.data[0].title}</p>
                <span>￥${json.data[0].price}</span>`
            })
        }, 100)

        /////////为您介绍轮播
        pAjax({
            url: 'server/indexlist5.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 10,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            console.log(json)

            total = json.total
                // 先清空后渲染
                // console.log(total)
            intrlunbo.innerHTML = ''
                // 循环渲染页面
            json.data.forEach(function(ele) {
                let str = `
                <ul class="intrlunbo1">
                <li>
                        <img src="${ele.img}" alt=" ">
                        <p>${ele.title}</p>
                        <span>￥${ele.price}</span>
                    </li>
                </ul>
                    `
                intrlunbo.innerHTML += str
            })
        })


        ////母婴专区
        pAjax({
            url: 'server/indexlist4.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 7,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let mbmain = document.querySelector('.mbmain')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="mbbox"> 
                    <img src="${ele.img}" alt="">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.ping}人评价</em>
                    </div>`
                mbmain.innerHTML += str
            })
            var mbsmallbox = document.createElement('div')
            mbsmallbox.className = 'mbsmallbox'
            mbmain.appendChild(mbsmallbox)
        })


        setTimeout(function() {
            pAjax({
                url: 'server/indexlist1.php',
                data: {
                    pagenum: localStorage.getItem('pagenum') - 0 || 1,
                    pagesize: 1,
                }

            }).then(function(res) {
                var json = JSON.parse(res)
                console.log(json)
                let mbsmallbox = document.querySelector('.mbsmallbox')
                mbsmallbox.innerHTML = `<img src="${json.data[0].img}" alt="">
                <p>${json.data[0].title}</p>
                <span>￥${json.data[0].price}</span>`
            })
        }, 100)


        //宝宝专用
        pAjax({
            url: 'server/indexlist3.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 8,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let mbmain2 = document.querySelector('.mbmain2')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="mbbox"> 
                    <img src="${ele.img}" alt="">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.xiao}人评价</em>
                    </div>`
                mbmain2.innerHTML += str
            })
            var mbsmallbox = document.createElement('div')
            mbsmallbox.className = 'mbsmallbox'
            mbmain2.appendChild(mbsmallbox)
        })


        // setTimeout(function() {
        //     pAjax({
        //         url: 'server/indexlist2.php',
        //         data: {
        //             pagenum: localStorage.getItem('pagenum') - 0 || 1,
        //             pagesize: 1,
        //         }

        //     }).then(function(res) {
        //         var json = JSON.parse(res)
        //         console.log(json)
        //         let mbsmallbox = document.querySelector('.mbsmallbox')
        //         mbsmallbox.innerHTML = `<img src="${json.data[0].img}" alt="">
        //         <p>${json.data[0].title}</p>
        //         <span>￥${json.data[0].price}</span>`
        //     })
        // }, 100)



        //小儿用药
        pAjax({
            url: 'server/indexlist5.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 8,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let mbmain3 = document.querySelector('.mbmain3')
            json.data.forEach(function(ele) {
                let str = `
                    <div class="mbbox"> 
                    <img src="${ele.img}" alt="">
                    <p>${ele.title}</p>
                    <span>￥${ele.price}</span>
                    <em>${ele.xiao}人评价</em>
                    </div>`
                mbmain3.innerHTML += str
            })
            var mbsmallbox = document.createElement('div')
            mbsmallbox.className = 'mbsmallbox'
            mbmain3.appendChild(mbsmallbox)
        })


        // setTimeout(function() {
        //     pAjax({
        //         url: 'server/indexlist4.php',
        //         data: {
        //             pagenum: localStorage.getItem('pagenum') - 0 || 1,
        //             pagesize: 1,
        //         }

        //     }).then(function(res) {
        //         var json = JSON.parse(res)
        //         console.log(json)
        //         let mbsmallbox = document.querySelector('.mbsmallbox')
        //         mbsmallbox.innerHTML = `<img src="${json.data[0].img}" alt="">
        //         <p>${json.data[0].title}</p>
        //         <span>￥${json.data[0].price}</span>`
        //     })
        // }, 100)

        //底部轮播渲染
        pAjax({
                url: 'server/index.php',
                data: {
                    pagenum: localStorage.getItem('pagenum') - 0 || 1,
                    pagesize: 4,
                }

            }).then(function(res) {

                var json = JSON.parse(res)
                let hslunbo = document.querySelector('.hslunbo')
                json.data.forEach(function(ele) {
                    let str = `<li>
                <p>${ele.title}</p>
                <span>￥${ele.price}</span>
                <img src="${ele.img1}" alt="">
                </li>`
                    hslunbo.innerHTML += str
                })
            })
            //2
        pAjax({
            url: 'server/index.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 4,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let hslunbo2 = document.querySelector('.hslunbo2')
            json.data.forEach(function(ele) {
                let str = `<li>
                <p>${ele.title}</p>
                <span>￥${ele.price}</span>
                <img src="${ele.img1}" alt="">
                </li>`
                hslunbo2.innerHTML += str
            })
        })

        ///3
        pAjax({
            url: 'server/index.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 4,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let hslunbo3 = document.querySelector('.hslunbo3')
            json.data.forEach(function(ele) {
                let str = `<li>
                <p>${ele.title}</p>
                <span>￥${ele.price}</span>
                <img src="${ele.img1}" alt="">
                </li>`
                hslunbo3.innerHTML += str
            })
        })

        ///4
        pAjax({
            url: 'server/index.php',
            data: {
                pagenum: localStorage.getItem('pagenum') - 0 || 1,
                pagesize: 4,
            }

        }).then(function(res) {

            var json = JSON.parse(res)
            let hslunbo4 = document.querySelector('.hslunbo4')
            json.data.forEach(function(ele) {
                let str = `<li>
                <p>${ele.title}</p>
                <span>￥${ele.price}</span>
                <img src="${ele.img1}" alt="">
                </li>`
                hslunbo4.innerHTML += str
            })
        })
    }

    pageAjax(1)

    $('.mb_top h1 i').find('span').mouseenter(function() {
        $(this).addClass('on')
            .siblings().removeClass('on')

        // index
        let index = $(this).index()

        $('.mainxuan>div')
            .eq(index).addClass('active')
            .siblings().removeClass('active')
    })



    //底部轮播


    let hsluncon = document.querySelector('.hsluncon')
    let hslunbo = document.querySelector('.hslunbo')
    let hsprev = document.querySelector('.hsprev')
    let hsnext = document.querySelector('.hsnext')
    let hsdot = document.querySelectorAll('.hsdian span')


    let hsNow = 0

    hsnext.addEventListener('click', function() {
        hsNow++
        if (hsNow == 4) {
            hsNow = 0
        }
        // console.log(hsNow)
        hslunbo.style.left = -hsNow * 296 + 'px'
        hsdot.forEach(function(ele, i) {

            ele.className = ''
        })
        hsdot[hsNow].className = 'hsdot'
    })


    function hsprev1() {
        hsNow--
        if (hsNow == -1) {
            hsNow = 3
        }
        hslunbo.style.left = -hsNow * 296 + 'px'
        hsdot.forEach(function(ele, i) {
            // hsdot[hsNow].className = ''

            ele.className = ''
        })
        hsdot[hsNow].className = 'hsdot'
    }
    hsprev.addEventListener('click', hsprev1)

    hsdot.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            ele.className = 'hsdot'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = ''
        })
    })

    hsdot.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            hsNow = index
            hslunbo.style.left = -hsNow * 296 + 'px'
            hsdot.forEach(function(ele, i) {

                ele.className = ''
            })
            hsdot[hsNow].className = 'hsdot'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = 'hsdot'
        })
    })




    ///2

    let hsluncon2 = document.querySelector('.hsluncon2')
    let hslunbo2 = document.querySelector('.hslunbo2')
    let hsprev2 = document.querySelector('.hsprev2')
    let hsnext2 = document.querySelector('.hsnext2')
    let hsdot2 = document.querySelectorAll('.hsdian2 span')


    let hsNow2 = 0

    hsnext2.addEventListener('click', function() {
        hsNow2++
        if (hsNow2 == 4) {
            hsNow2 = 0
        }
        // console.log(hsNow)
        hslunbo2.style.left = -hsNow2 * 296 + 'px'
        hsdot2.forEach(function(ele, i) {

            ele.className = ''
        })
        hsdot2[hsNow2].className = 'hsdot2'
    })


    hsprev2.addEventListener('click', function() {
        hsNow2--
        if (hsNow2 == -1) {
            hsNow2 = 3
        }
        hslunbo2.style.left = -hsNow2 * 296 + 'px'
        hsdot2.forEach(function(ele, i) {
            // hsdot[hsNow].className = ''

            ele.className = ''
        })
        hsdot2[hsNow].className = 'hsdot2'
    })



    hsdot2.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            ele.className = 'hsdot2'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = ''
        })
    })

    hsdot2.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            hsNow2 = index
            hslunbo2.style.left = -hsNow2 * 296 + 'px'
            hsdot2.forEach(function(ele, i) {

                ele.className = ''
            })
            hsdot2[hsNow2].className = 'hsdot2'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = 'hsdot2'
        })
    })

    //3


    let hsluncon3 = document.querySelector('.hsluncon3')
    let hslunbo3 = document.querySelector('.hslunbo3')
    let hsprev3 = document.querySelector('.hsprev3')
    let hsnext3 = document.querySelector('.hsnext3')
    let hsdot3 = document.querySelectorAll('.hsdian3 span')


    let hsNow3 = 0

    hsnext3.addEventListener('click', function() {
        hsNow3++
        if (hsNow3 == 4) {
            hsNow3 = 0
        }
        // console.log(hsNow)
        hslunbo3.style.left = -hsNow3 * 296 + 'px'
        hsdot3.forEach(function(ele, i) {

            ele.className = ''
        })
        hsdot3[hsNow3].className = 'hsdot3'
    })


    hsprev3.addEventListener('click', function() {
        hsNow3--
        if (hsNow3 == -1) {
            hsNow3 = 3
        }
        hslunbo3.style.left = -hsNow3 * 296 + 'px'
        hsdot3.forEach(function(ele, i) {
            // hsdot[hsNow].className = ''

            ele.className = ''
        })
        hsdot3[hsNow3].className = 'hsdot3'
    })



    hsdot3.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            ele.className = 'hsdot3'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = ''
        })
    })

    hsdot3.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            hsNow3 = index
            hslunbo3.style.left = -hsNow3 * 296 + 'px'
            hsdot3.forEach(function(ele, i) {

                ele.className = ''
            })
            hsdot3[hsNow3].className = 'hsdot3'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = 'hsdot3'
        })
    })




    //4


    let hsluncon4 = document.querySelector('.hsluncon4')
    let hslunbo4 = document.querySelector('.hslunbo4')
    let hsprev4 = document.querySelector('.hsprev4')
    let hsnext4 = document.querySelector('.hsnext4')
    let hsdot4 = document.querySelectorAll('.hsdian4 span')


    let hsNow4 = 0

    hsnext4.addEventListener('click', function() {
        hsNow4++
        if (hsNow4 == 4) {
            hsNow4 = 0
        }
        // console.log(hsNow)
        hslunbo4.style.left = -hsNow4 * 296 + 'px'
        hsdot4.forEach(function(ele, i) {

            ele.className = ''
        })
        hsdot4[hsNow4].className = 'hsdot4'
    })


    hsprev4.addEventListener('click', function() {
        hsNow4--
        if (hsNow4 == -1) {
            hsNow4 = 3
        }
        hslunbo4.style.left = -hsNow4 * 296 + 'px'
        hsdot4.forEach(function(ele, i) {
            // hsdot[hsNow].className = ''

            ele.className = ''
        })
        hsdot4[hsNow4].className = 'hsdot4'
    })



    hsdot4.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            ele.className = 'hsdot4'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = ''
        })
    })

    hsdot4.forEach(function(ele, index) {
        ele.addEventListener('mouseenter', function() {
            hsNow4 = index
            hslunbo4.style.left = -hsNow4 * 296 + 'px'
            hsdot4.forEach(function(ele, i) {

                ele.className = ''
            })
            hsdot4[hsNow4].className = 'hsdot4'
        })
        ele.addEventListener('mouseleave', function() {
            ele.className = 'hsdot4'
        })
    })




    $('.footer').load('indexfoot.html')


    // let arr1 = []
    // let gfbox1 = gfbox
    // $('.gfbox').get(0).addEventListener('click', function(ev) {
    // 查看详情
    // if (ev.target.tagName === 'IMG' || ev.target.className === 'btn btn-primary') {
    //     let id = ev.target.getAttribute('data-id')
    //     window.location.href = 'detail.html?id=' + id

    //     localStorage.setItem('detailId', id)

    // }
    // })